<script lang='ts' setup>

import {reactive, ref, onMounted} from 'vue'

const props = defineProps({
  drawerVisible: Boolean
})
import {useDevice} from "@/hooks/web/useDevice";
import {studentVisit, visitInfo} from "@/api/student";
import {channelVisitAdd, channelVisitList} from "@/api/channel";
import {useCommon} from '@/hooks/web/useCommon'
import {ElMessage} from "element-plus";
const {
  optionsBox,
  gatherOptions,
} = useCommon()
let {mobile} = useDevice()

let isSubmitLoading = ref(false)
let innerDrawer = ref(false)
let subLoading = ref(false)
let visitRef = ref('')
let visitType = ref(1)
let student = reactive({
  name: '',
  school: '',
  seas: '',
  student_id: ''
})

let channel = reactive({
  name: '',
  project_manager: '',
  channel_id: '',
})

let visitForm = reactive({
  desc: '',
  status:'',
})

let visitRules = {
  desc: [{
    required: true,
    message: '请输入回访内容',
    trigger: 'blur'
  }]
}

let visitData = ref({})
const emit = defineEmits(['cancelClick','handleSubmitVisit'])

const cancelClick = async () => {
  visitData.value = ''
  emit('cancelClick', false)
}


const handleInClose = () => {
  innerDrawer.value = false
  visitRef.value.resetFields()
}

//获取学生回访记录列表
const getVisit = async () => {
  isSubmitLoading.value = true
  const res = await visitInfo({student_id: student.student_id, seas: student.seas})
  console.log('回访记录详情', res.data)
  isSubmitLoading.value = false
  if (res) {
    visitData.value = res.data.visitInfo
    visitForm.status = res.data.student_info.status
  }
}

//获取渠道回访列表
const getChannelVisit = async () => {
  isSubmitLoading.value = true
  const res = await channelVisitList({channel_id: channel.channel_id})
  console.log('回访记录详情', res.data)
  isSubmitLoading.value = false
  if (res) {
    visitData.value = res.data.list
  }
}

const submitVisit = () => {
  visitRef.value.validate(async valid => {
    if (valid) {
      subLoading.value = true
      let data;
      let res;
      if (visitType.value === 1) {
        data = visitForm
        data.student_id = student.student_id
        res = await studentVisit(data);
      } else {
        data = {
          content: visitForm.desc,
          channel_id: channel.channel_id
        }
        res = await channelVisitAdd(data);
      }

      subLoading.value = false
      if (res) {
        ElMessage({message: '添加成功', type: 'success'})
        handleInClose()
        if (visitType.value === 1) {
          emit('handleSubmitVisit')
          await getVisit()
        } else {
          await getChannelVisit()
        }

      }
    } else {
      return false
    }
  })
}

onMounted(()=>{
  gatherOptions()
})

defineExpose({student, getVisit, getChannelVisit, visitType, channel})
</script>
<template>
  <el-drawer v-model="props.drawerVisible" direction="rtl" :before-close="cancelClick" title="历史回访记录" :size="mobile  ?'85%':'30%'">
    <el-row v-loading="isSubmitLoading">
      <el-col :span="20" :offset="1">
        <el-button type="primary" style="margin-bottom: 20px" icon="plus"
                   @click="innerDrawer = true"
                   v-if="!student.seas"
        >新增回访信息
        </el-button>
        <div class="block">
          <el-form v-if="visitType===1">
            <el-form-item label="报考院校:">
              <span>{{ student.school }}</span>
            </el-form-item>
            <el-form-item label="学生姓名:">
              <span>{{ student.name }}</span>
            </el-form-item>
            <el-form-item label="回访信息:"></el-form-item>
          </el-form>
          <el-form v-if="visitType===2">
            <el-form-item label="机构名称:">
              <span>{{ channel.name }}</span>
            </el-form-item>
            <el-form-item label="客户项目负责人:">
              <span>{{ channel.project_manager }}</span>
            </el-form-item>
            <el-form-item label="回访信息:"></el-form-item>
          </el-form>
          <el-timeline  v-if="!student.seas">
            <el-timeline-item
                v-for="(activity, index) in visitData"
                :key="index"
                :timestamp="activity.teacher_name+' - '+activity.created_time"
            >
              {{ activity.content }}
            </el-timeline-item>
          </el-timeline>
          <el-timeline v-else>
            <el-timeline-item
                v-for="(activity, index) in visitData.list"
                :key="index"
            >
              {{ activity.created_time + ' - ' + activity.project_id_name + ' - ' + activity.teacher_id_name }}
            </el-timeline-item>
          </el-timeline>
        </div>
      </el-col>
    </el-row>
    <el-drawer
        title="新增回访信息"
        :size="mobile  ?'70%':'22%'"
        :append-to-body="true"
        :before-close="handleInClose"
        v-model="innerDrawer"
    >
      <el-row>
        <el-col :span="20" :offset="1">
          <el-form label-width="85px" label-position="left" ref="visitRef" :rules="visitRules"
                   :model="visitForm"
          >
            <el-col :xs="24" :lg="24" :md="24">
              <el-form-item label="回访信息:" prop="desc">
                <el-input type="textarea" :rows="5" v-model=" visitForm.desc" placeholder="请输入回访信息"></el-input>
              </el-form-item>
              <el-form-item label="当前状态:" prop="status" v-if="visitType===1">
                <el-select v-model="visitForm.status" placeholder="请选择当前状态" >
                  <el-option v-for="(item,index) in optionsBox.status_list"
                             :label="item.name"
                             :value="item.value"
                             :key="index"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item style="margin-top: 20px">
                <el-button :loading="subLoading" type="primary" @click="submitVisit">提交回访信息</el-button>
              </el-form-item>
            </el-col>
          </el-form>
        </el-col>
      </el-row>
    </el-drawer>
  </el-drawer>
</template>

<style scoped></style>